<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索客户"
              border="none"
              color="#fff"
              shape="circle"
              v-model="sideObj.keywords"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>

          <view class="flex flex-sa f-35">
            <view class="f-35">
              <view class="flex flex-c f-35"> 总欠款 </view>
              <view class="flex flex-c f-30 m-b-20"> 3 </view>
            </view>
            <view class="f-35">
              <view class="flex flex-c f-35"> 总人数 </view>
              <view class="flex flex-c f-30 m-b-20"> 3 </view>
            </view>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-240">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <liu-swipe-action
            ref="liuSwipeAction"
            :index="index"
            @clickItem="liuClickItem"
          >
            <u-cell :title="item.name" @click="pushCustomDetails(item)">
              <u-avatar
                slot="icon"
                :text="getName(item.name)"
                fontSize="18"
                randomBgColor
              ></u-avatar>
              <text slot="right-icon">累欠¥{{ item.amountDebt }}</text>
            </u-cell>
          </liu-swipe-action>
        </u-list-item>
      </u-list>
    </view>

    <!-- 筛选弹框 侧边栏 -->
    <u-popup
      class="sidebar"
      :show="show"
      mode="right"
      overlayOpacity="0.3"
      @close="close"
      @open="open"
    >
      <view class="pop-view p-t-332">
        <view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1" @click="toCategory">
              <view class="title"> 类别 </view>
              <view class="value" v-if="sideObj.catName">
                {{ sideObj.catName }}
              </view>
            </view>
            <view class="icon">
              <u-icon
                name="close"
                color="#999"
                size="20"
                v-if="sideObj.catName"
                @click="
                  () => {
                    sideObj.catName = '';
                    sideObj.catId = '';
                  }
                "
              ></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1" @click="toShop">
              <view class="title"> 门店 </view>
              <view class="value" v-if="sideObj.shop">
                <!-- {{ sideObj.shop }} -->
              </view>
            </view>
            <view class="icon">
              <u-icon
                name="close"
                color="#999"
                size="20"
                v-if="sideObj.shop"
                @click="sideObj.shop = ''"
              ></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1" @click="toShop">
              <view class="title"> 标签 </view>
              <view class="value" v-if="sideObj.shop">
                <!-- {{ sideObj.shop }} -->
              </view>
            </view>
            <view class="icon">
              <u-icon
                name="close"
                color="#999"
                size="20"
                v-if="sideObj.shop"
                @click="sideObj.shop = ''"
              ></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1">
              <view class="title"> 显示停用 </view>
              <view class="value">
                <u-switch v-model="sideObj.isEnable" size="18"></u-switch>
              </view>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1">
              <view class="title"> 隐藏0欠款 </view>
              <view class="value">
                <!-- <u-switch v-model="sideObj.inventory" size="18"></u-switch> -->
              </view>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1">
              <view class="title"> 超信誉额 </view>
              <view class="value">
                <!-- <u-switch v-model="sideObj.inventory" size="18"></u-switch> -->
              </view>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1">
              <view class="title"> 我关注的 </view>
              <view class="value">
                <!-- <u-switch v-model="sideObj.inventory" size="18"></u-switch> -->
              </view>
            </view>
          </view>
        </view>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button
            text="重置"
            shape="circle"
            class="reset m-r-10"
            @click="
              () => {
                show = false;
              }
            "
          ></u-button>
          <u-button
            text="搜索"
            shape="circle"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
            @click="onSearch"
          ></u-button>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
    <u-loadmore
      dashed
      line
      :status="status"
      loadingText="努力加载中"
      loadmoreText="轻轻上拉"
      nomoreText="实在没有了"
    />
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getlist, addData, delectData } from "@/apis/bill/information/custom";
import { getStringOne } from "@/utils/util.js";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      status: "loadmore", // 加载更多状态
      show: false,
      search: null,
      indexList: [],
      pages: {
        current: 1,
        size: 20,
      },
      config: {
        title: "客户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      isJump: null, //控制点击列表是跳转回去还是跳转到详情 true == 回去  其他 == 详情
      sideObj: {
        catId: null,
        catName: null,
        isEnable: true,
        keywords: "",
      },
    };
  },
  computed: {},
  onLoad() {
    this.initData();
    if (this.$Route.query.isJump) {
      this.isJump = this.$Route.query.isJump;
    }
    // 类别
    uni.$on("on-selected-customer", (data) => {
      console.error(data);
      this.sideObj.catName = data.name;
      this.sideObj.catId = data.id;
    });
  },
  beforeDestroy() {
    uni.$off("on-selected-customer");
  },
  methods: {
    // 侧拉框
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset();
        this.$Router.push({
          path: "/pages/application/pages/personnel/custom/custom-dealis-au/custom-dealis-au",
          query: {
            id: this.indexList[item.index].id,
          },
        });
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset();
        this.deleteByIdQuarterData(this.indexList[item.index].id, item.index);
      }
    },
    //删除
    deleteByIdQuarterData(id, index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "您确认要删除【" + this.indexList[index].name + "】吗?",
        success: function (res) {
          if (res.confirm) {
            delectData([id]).then((res) => {
              if (!res.flag) return;
              _this.$refs.uToast.show({
                type: "success",
                title: "",
                message: "删除成功",
              });
              _this.indexList.splice(index, 1);
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 跳转类别
    toCategory() {
      uni.navigateTo({
        url: "/pages/application/pages/personnel/components/customer-category",
      });
    },
    // 跳转门店
    toShop() {
      uni.navigateTo({
        url: "/pages/selects/shop/index",
      });
    },
    // 侧边栏
    close() {
      this.show = false;
    },
    open() {},
    // 搜索
    onSearch() {
      this.pages.current = 1;
      this.indexList = [];
      this.show = false;
      this.initData();
    },
    scrolltolower(e) {
      this.pages.current++;
      this.initData();
      // 到底了
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: _this.sideObj,
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "create_time",
              asc: false,
            },
          ],
        },
      };
      uni.showLoading({
        title: "加载中",
      });
      this.status = "loading";
      // console.log("billId", billId);
      getlist(billId)
        .then((res) => {
          // console.log('res', res)
          if (!res.flag) return;
          const data = res.data || {};
          if (data.records.length <= 20) {
            this.status = "nomore";
          } else {
            this.status = "loadmore";
          }
          this.indexList = [...this.indexList, ...data.records];
        })
        .finally((_) => {
          uni.hideLoading();
        });
    },
    getName(name) {
      return getStringOne(name);
    },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    pushCustomDetails(item) {
      if (this.isJump) {
        uni.$emit("pushCustomDetails", item);
        this.$Router.back();
      } else {
        this.$Router.push({
          path: "/pages/application/pages/personnel/custom/custom-dealis-au/custom-dealis-au",
          query: {
            id: item.id,
          },
        });
      }
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "personnelCustomCustomDetailsAu",
        });
      } else if (item.key === "btn2") {
        this.show = true;
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
